<template>
    <div class="home">
        <div class="navTop">
            <van-search @click="seeSearchShow" class="van-search" shape="round" background="#4fc08d"
                placeholder="请输入搜索关键词" />
            <van-tabs class="van-tabs" v-model="active" @click="passId" swipeable>
                <van-tab class="van-tab" v-for="(item, index) in navTitle" :name="item._id" :key="index"
                    :title="item.name">
                </van-tab>
            </van-tabs>
        </div>
        <router-view />
        <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
            <div class="article">
                <div class="acticle-container" @click="showPopup(item._id)" v-for="(item, i) in homeList"
                    :key="item._id">
                    <p>{{ item.title }}</p>
                    <div class="imgs">
                        <img :src="img" alt="" v-for="img in item.imageSrc" :key="img.id">
                    </div>
                    <div class="commentArea">
                        <span>{{ item.cate_name }}</span>
                        <span>{{ item.poster_type }}评论</span>
                        <span>{{ timer[i] }}</span>
                    </div>
                </div>
            </div>
        </van-pull-refresh>
        <van-popup v-model="show" v-if="show" position="right" :style="{ width: '100%', height: '100%' }">
            <HomeContainer :detailId="detailId" @checkShow="getSon" />
        </van-popup>
        <van-popup v-model="searchShow" position="bottom" :style="{ width: '100%', height: '100%' }">
            <Search @noSeeSearch="noSeeSearch" />
        </van-popup>
    </div>
</template>

<script>
import { getHomelist, getClass } from '../request/api/home.js'
import HomeContainer from '../components/Home/HomeContainer.vue'
import Search from '../components/Home/Search.vue'
import timer from '../utils/derevion.js'
export default {
    name: 'home',
    components: {
        HomeContainer,
        Search
    },
    data() {
        return {
            value: '',
            active: '',
            navTitle: [], // 导航栏数据
            homeList: [], // 首页内容数据
            isLoading: false, // 下拉刷新
            ids: '610128169b33ed00018ed5df', // 列表数据id
            show: false, // 控制文章详情弹出层显示隐藏
            detailId: '',
            searchShow: false, // 控制搜索页面弹出,
            timer: [], // 时间戳
        }
    },
    async mounted() {
        let data = await getClass();
        let res = await getHomelist({
            cate_id: this.ids,
            skip: "0",
            limit: "10",
        })
        this.homeList = res.data.data;
        this.navTitle = data.data.data;
        this.timer = res.data.data.map(item => timer(item.time));
    },
    methods: {
        async onRefresh() {
            let res = await getHomelist({
                cate_id: this.ids,
                skip: "10",
                limit: "20",
            })
            this.homeList = res.data.data;
            this.isLoading = false;
        },
        async passId(name) {
            this.ids = name;
            let res = await getHomelist({
                cate_id: this.ids,
                skip: "0",
                limit: "10",
            })
            this.homeList = res.data.data;
        },
        showPopup(id) {
            this.show = true;
            this.detailId = id;
        },
        // 子组件控制弹出层
        getSon(val) {
            this.show = val;
        },
        seeSearchShow() {
            this.searchShow = true;
        },
        noSeeSearch(val) {
            this.searchShow = val;
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    width: 100vw;
    height: 100vh;

    .van-pull-refresh {
        margin-top: 100px;
    }

    .navTop {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 10;
    }

    .van-tab {
        height: 500px;
    }

    .article {
        width: 100%;

        .acticle-container {
            width: 100%;
            height: 200px;
            border-bottom: 1px solid #ccc;

            p {
                margin-left: 10px;
                height: 20px;
                overflow: hidden;
            }

            .imgs {
                width: 100px;
                height: 100px;
                display: flex;

                img {
                    width: 100%;
                    height: 100%;
                    margin: 5px 10px;
                }
            }

            span {
                margin: 0 10px;
            }

            .commentArea {
                width: 100%;
                margin-top: 20px;
            }
        }
    }

}
</style>